<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIY SELECT BOX</title>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<style type="text/css">
body {
	background-color: #eef2fb;
	font-size: 13px;
	font-family: 'Arial';
}

.input {
	height: 20px;
	width: 150px;
	line-height: 20px;
	border: 1px solid #ccc;
	background: url(A3.jpg) no-repeat -150px 0px;
	font-family: 'Arial';
	text-align: center;
}

.sub {
	position: absolute;
	top: 25px;
	left: 0;
	background: white;
	display: none;
	height: 120px;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #9fcde7;
	scrollbar-3dlight-color: #eef2fb;
	scrollbar-darkshadow-color: #eef2fb;
	scrollbar-shadow-color: #9fcde7;
	scrollbar-arrow-color: #9fcde7;
	scrollbar-track-color: #f9f9f9;
}

.sub ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sub ul li {
	padding: 0 5px;
	line-height: 24px;
	background: #f9f9f9;
	border-bottom: 1px dotted #ccc;
	border-left: 1px dotted #ccc;
	/*border-right: 1px dotted #ccc;*/
	text-align: left;
}

table,td,tr {
	border: 1px #ccc solid;
	text-align: center;
}

tr {
	height: 28px;
}

input {
	border: 1px #ccc solid;
	background: white;
}

label {
	width: 150px;
	border: 1px #ccc solid;
	background: white;
}
</style>

<script type="text/javascript">
	$(document)
			.ready(
					function() {

						prepareSelect();
						//add a row for table
						var i = 0;
						$("#btnOne")
								.click(
										function() {
											i++;
											var row = $("<tr></tr>");
											var cc = "<td><input type='text' id='txt2' name='txt2' /></td>";
											var cc = cc
													+ "<td><div class='select2'><input type='text' id='sel"+i+"' name='sel' class='input' readonly='readonly'/><div id='sel"+i+"list' class='sub'><ul><li>CaseOne</li><li>HelloBaby</li><li id='sel"+i+"CD'>Todays</li><li>Marry</li><li>Kitty</li><li>Monkey</li><li>Naruto</li></ul></div></div></td>";
											cc = cc
													+ "<td><label id='lbl2'>ONTHING</label></td>";
											cc = cc
													+ "<td><input type='button' class='btnDel' value='Delete'/></td>";
											var cell = $(cc);
											row.append(cell);
											$("#tabs").append(row);
											prepareSelect();
										});
					});

	//delete a row from table	
	function removeRow() {
		$(".btnDel").each(function(event) {
			$(this).click(function() {
				$(this).parent().parent().remove();
			});
		});
	}
	function prepareSelect() {
		$(".input").each(function(event) {
			$(this).click(function(e) {
				$(".sub").hide();
				var x1 = $(this).offset().left;
				var y1 = $(this).offset().top;
				var w1 = $(this).width();
				var tid = "#" + this.id;
				var sub = tid + "list";
				var subu = sub + " ul";
				var subl = sub + " li";
				var subc = tid + "CD";
				$(sub).css("width", w1 + 5);
				$(sub).css("left", x1);
				$(sub).css("top", y1 + 25);
				$(sub).show();
				$(subc).css('background-color', 'pink');
				$(subl).mouseover(function() {
					$(this).css('background-color', 'gray');
				});
				$(subl).mouseout(function() {
					$(this).css('background-color', 'white');
					$(subc).css('background-color', 'pink');
				});
				$(subl).click(function() {
					$(tid).val($(this).text());
					$(sub).hide();
				});

			});
		});
		removeRow();
	}
</script>
</head>
<body>
	<div id="other">
		<div class="input" id="one" name="one" value=''>TEST ONE</div>
		<div id="onelist" class="sub">
			<ul>
				<li>CaseOne</li>
				<li>HelloBaby</li>
				<li id="oneCD">Todays</li>
				<li>Marry</li>
				<li>Kitty</li>
				<li>Monkey</li>
				<li>Naruto</li>
			</ul>
		</div>
	</div>

	<div id="other1" style="margin-top: 20px;">
		<input type="text" id="middle" name="middle" class="input"
			readonly="readonly" />
		<div id="middlelist" class="sub">
			<ul>
				<li>CaseOne</li>
				<li>HelloBaby</li>
				<li id="middleCD">Todays</li>
				<li>Marry</li>
				<li>Kitty</li>
				<li>Monkey</li>
				<li>Naruto</li>
			</ul>
		</div>
	</div>

	<div id="other2" style="margin-left: 200px; margin-bottom: 20px;">
		<input type="text" id="two" name="two" class="input"
			readonly="readonly" />
		<div id="twolist" class="sub">
			<ul>
				<li>CaseOne</li>
				<li>HelloBaby</li>
				<li>Todays</li>
				<li>Marry</li>
				<li id="twoCD">Kitty</li>
				<li>Monkey</li>
				<li>Naruto</li>
			</ul>
		</div>
	</div>

	<table id="tabs" width="700" border="0" cellpadding="0" cellspacing="0"
		bgcolor="white">
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
			<td>Four</td>
		</tr>
		<tr>
			<td><input type="text" id="txtOne" name="txtOne" /></td>
			<td>
				<div id="select">
					<input type="text" id="sel" name="sel" class="input"
						readonly="readonly" />
					<div id="sellist" class="sub">
						<ul>
							<li>CaseOne</li>
							<li>HelloBaby</li>
							<li id="selCD">Todays</li>
							<li>Marry</li>
							<li>Kitty</li>
							<li>Monkey</li>
							<li>Naruto</li>
						</ul>
					</div>
				</div>
			</td>
			<td width="17%"><label id="lblOne">ONTHING</label></td>
			<td><input type="button" class="btnDel" value="Delete" /></td>
		</tr>
	</table>

	<p style="margin-left: 200px;">
		<input type="button" id="btnOne" name="btnOne" value="Add Row"
			style="line-height: 23px;" />
	</p>
</body>
</html>